<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <link rel="stylesheet" href="css/table.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">

        <div class="Box">
            <div class="imgBox">

                <img src="./img/dasd.jpg" alt="葫芦娃" title="我一尿过河">
            </div>
            <div class="loginTable" style="display:none">
                <span class="log">登录</span>
                <br>
                <span class="log">用户名：</span>
                <input v-model="userName" type="text" placeholder="请输入用户名：">
                <br>
                <span class="log">密&nbsp&nbsp&nbsp&nbsp码：</span>
                <input v-model="password" type="password" placeholder="请输入密码：">
                <br>
                <span class="log">验证码：</span>
                <input type="text" v-model="checkID" placeholder="请输入下方验证码：">
                <div class="checkID">

                </div>
                <input type="checkbox" name="rememberPassword" v-model="isRead" /><span class="remember">记住密码</span>
                <input type="checkbox" name="nextLogin" /><span class="remember">下次自动登录</span>
            </div>
            <div class="registTable">
                <span class="log">注册</span>
                <br>
                <span class="log">用户名：</span><input v-model="userName" class="input" type="text" placeholder="请输入用户名：">
                <br>
                <span class="log">密&nbsp&nbsp&nbsp&nbsp码：</span><input class="input" v-model="password" type="password"
                    placeholder="请输入密码：">
                <br>
                <span class="log">验证码：</span><input class="input" type="text"v-model="checkID" placeholder="请输入下方验证码：">
                <br>
                <div class="checkID">

                </div>
                <br>
                <input type="checkbox" name="rememberPassword" v-model="isRead" /><span class="remember">我已经认真阅读并且同意<a href="#"
                        class="link">《葫芦娃保密协议》</a></span>
            </div>
            <div class="btnBox">
                <button class="login" @click="loginClick">登录</button>
                <button class="regist">注册</button>
            </div>
            <footer>copyright@WUT&nbsp;AX@2020-2020</footer>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                userName: '',
                password: '',
                checkID: '',
                isRead: false
            },
            methods: {
                loginClick() {
                   var userList=[];
                   
                   let user={
                        userName:this.userName,
                        password:this.password
                    }
                    fetch('./json/login.json').then(response=>response.json()).then(response=>{
                        // console.log(response);
                        userList=response.userArray;
                        // console.log(userList);
                        for(item of userList){
                            console.log(item);
                            if(user.userName==item.userName){
                                if(user.password==item.password){
                                    alert("登录成功！")
                                    return;
                                }
                                else{
                                    alert("用户名或密码错误！")
                                    return;
                                } 
                            }
                        }
                        alert("用户不存在，请进行注册！")
                    })
                    
                   
                    //console.log(userList);
                },

            },
        })
    </script>
</body>

</html>